<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<%@include file="../common/navbar.jsp" %>
<div class="container">
    <div class="card" style="width: 18rem;">
        <img src="images/${classifyName}/${book.bookName}.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title" id="name">${book.bookName}</h5>
          <p class="card-text">${book.bookAuthor}</p>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">出版社：${book.pubs}</li>
            <li class="list-group-item" id="price">价格：￥${book.price}</li>
            <li class="list-group-item">选择数量
                <input type="button" value="-" id="del" onclick="del()">
                <span id="current">1</span>
                <input type="button" value="+" id="add" onclick="add()">
                剩余数量 <span id="max">${book.bookCount}</span>
            </li>
        </ul>
        <input type="hidden" value="${book.bookId}" name="bookId" id="bookId"/>
        <input type="hidden" value="1" name="count" id="count"/>

       <%-- <input type="hidden" name="count" id="count" value="1">
        <input type="hidden" name="bookId" id="bookId" value="${book.bookId}">--%>
       <%-- <input type="hidden" name="price" id="price" value="${book.price}">--%>
        <div class="card-body">
            <a class="btn btn-primary" href="#" role="button" onclick="buy()" >购买</a>
            <%--<input type="submit" class="btn btn-primary" />加入购物车--%>
            <a class="btn btn-primary" href="#" role="button" onclick="cart()">加入购物车</a>
        </div>
    </div>
</div>
<script>
    function del() {
        var current = $("#current").html();
        if (current <= 1) {
            current = 1;
        } else {
            current = current - 1;
        }
        $('#current').html(current);
        $('#count').value(current)  ;
    }
    function add() {
        var current = $("#current").html() - 0;
        var max = $("#max").html() - 0;
        if (current < max) {
            current = current + 1;
        } else {
            current = current;
        }
        $('#current').html(current);
        $('#count').value(current);

    }
    function buy() {
        var current = $("#current").html() - 0;
        var price = $("#price").html() - 0;
        var bookId = $("#bookId").val() - 0;
        alert('确认购买吗？');
        window.location.href = 'directBuy?count='+current+'&bookId='+bookId;
    }
    function cart() {
        var current = $("#current").html() - 0;
        var price = $("#price").html() - 0;
        var name = $("#name").html();
        var bookId = $("#bookId").val() - 0;
        alert('确认加入购物车吗？');
        window.location.href = 'addToCart?count='+current+'&bookId='+bookId;
    }

</script>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>